<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="icon" href="./favicon.ico" />
<title>国际学校开放日</title>
<script src="./assets/js/global.js"></script>
</head>

<body>
 
<div v-cloak id="app">
  <zb-main>

    <a slot="extra" href="openPrivateDay.html" class="btn">看私立学校</a>

    <div class="quick-module-1" style="padding-top:0;">

      <div class="date-screen">
        <div class="date-list">
          <div v-for="(item,index) in nav" :key="index" class="item" :class="[item.open ? 'item-1' : 'item-2', item.id === navId ? 'active' : '']" @click="getNavId(item)">
            <div class="time">{{item.name}}</div>
            <div class="status">({{item.status === 1 ? '开放' : '结束'}})</div>
          </div>
        </div>
      </div>

      <div class="goods-list">
        <div v-for="(item,index) in list" :key="index" class="item">
          <div class="left">
            <a :href="'schoolDetail.html?id=' + (index + 1)" class="photo">
              <img :src="item.img" alt="">
            </a>
            <div v-if="item.end" class="btn-2">已结束</div>
            <div v-else-if="item.success" class="btn-2">预约成功</div>
            <div v-else class="btn-1" @click="onlineService(item)">免费预约</div>
            
            <div class="city">{{item.city}}</div>
          </div>
          <div class="right">
            <div class="name">{{item.name}}</div>
            <div class="time">
              <span @click="chooseTime(index)">时间：{{item.time}}</span>
            </div>
            <a href="./map.html" class="address">[ 地点：{{item.address}} ]</a>
            <div class="intro">
              <span>{{item.js}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="paginations">
        <div class="prev btn" @click="prev">
          <span></span>
        </div>
        <div class="pages">
          <div v-for="(item,index) in size" :key="index" class="page" :class="{ active: pageNo === (index + 1) }" @click="pageNo = index + 1">{{index + 1}}</div>
        </div>
        <div class="next btn" @click="next">
          <span></span>
        </div>
      </div>
    </div>
    <van-popup v-model="showTimePicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="options"
        value-key="label"
        @cancel="showTimePicker = false"
        @confirm="onChange"
      />
    </van-popup>
  </zb-main>
</div>

<script type="text/babel">
  new Vue({
    el: '#app',
    data: {
      nav: [
        {id:7, open:false, name:"7月份"},
        {id:8, open:true, name:"8月份"},
        {id:9, open:true, name:"9月份"},
        {id:10, open:true, name:"10月份"},
        {id:11, open:true, name:"11月份"},
        {id:12, open:true, name:"12月份"},
      ],
      navId:8,
      
      showTimePicker:false,
      options: [
        {id:1, label: '2023年08月05日 星期六/半天'},
        {id:2, label: '2023年08月06日 星期日/半天'},
        {id:3, label: '2023年08月07日 星期一/半天'},
        {id:4, label: '2023年08月08日 星期二/半天'},
        {id:5, label: '2023年08月09日 星期三/半天'},
        {id:6, label: '2023年08月01日 星期四/半天'},
        {id:7, label: '2023年08月02日 星期吴/半天'},
        {id:8, label: '2023年08月03日 星期六/半天'},
        {id:9, label: '2023年08月04日 星期六/半天'},
      ],
      
      
      active: 1,
      pageNo: 1,   // 页码
      pageSize: 4, // 每页数据条数
      total: 24,   // 数据总长度
      list:[],
      listIdx:0
    },
    computed: {
      size() {
        return Math.ceil(this.total / this.pageSize)
      }
    },
    components: {
      
    },
    methods: {
      getCon(){
        const item = { name:" 北京市朝阳区凯文学校开放日预约", address:"北京市朝阳区宝泉三街46号院", js:"各学段从9月16日开始报名，同时将会陆续开展招生说明会，家长们可直接选择合适的时...", city:"北京市朝阳区", img:"./assets/images/privateSchool/photo.png", end:false, time:"2023年08月05日 星期六/半天"}
        this.list = [
          {id:1, ...item},
          {id:2, ...item, end:true},
          {id:3, ...item},
          {id:4, ...item},
          {id:5, ...item, end:true},
          {id:6, ...item},
          {id:7, ...item},
        ]
      },
      chooseTime(i){
        this.showTimePicker = true
      },
      onChange(picker, value, index) {
        // vant.Notify({ type: 'danger', message: '通知内容' });
        console.log('index===>',picker, value, index)
        this.list[this.listIdx].time = picker.label;
        this.showTimePicker = false
      },
      // 获取新的月份
      getNavId(item){
        if(!item.open) return vant.Notify({ type: 'danger', message: '很抱歉，该月份开放日期已结束看看其他月份吧！' });
        this.navId = item.id;
        console.log('接口请求数据')
      },
      
      onlineService(item) {
        if (item) {
          item.success = true
          this.list = [...this.list]
        }
        onlineService()
      },
      prev() {
        if (this.pageNo === 1) {
          this.pageNo = this.size
        } else {
          this.pageNo --
        }
      },
      next() {
        if (this.pageNo === this.size) {
          this.pageNo = 1
        } else {
          this.pageNo ++
        }
      }
    },
    mounted() {
      this.getCon()
    }
  })
</script>

</body>
</html>